<!--
  author: tangcheng_cd
  create by: 2018-05-21
  descr: 机构树组件
-->
<template>
  <div class="orgTreeComp">
    <!--<div class="orgTreeHeader">机构树</div>-->
    <div class="orgTreeHeader">
      <div>
        <el-input
          size="mini"
          placeholder="输入机构名称或机构代码搜索"
          auto-complete="on"
          class="orgTreeSearchInput pull-right"
          v-model="orgfilterText"
        >
          <el-button type="primary" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div>
        <span style="width:100%" class="clear-fix">
        <span class="el-tree-node__label el-tree-node__label_left org-name">机构名称
          <!--<el-button size="mini" class="expand-btn" :icon="'el-icon-plus'" @click="ff"></el-button>-->
          <!--TODO:这里可以做一个一键展开和一键收缩功能-->
        </span>
        <span v-if="showOrgCode" class="el-tree-node__label_right org-code">机构号</span>
      </span>
      </div>
    </div>
    <el-tree ref="orgTreeX"
             :data="menuData"
             node-key="id"
             highlight-current
             :empty-text="'无机构数据'"
             :props="defaultProps"
             :default-expand-all="defaultExpandAll"
             :render-content="renderContentFun"
             @node-click="handleNodeClick"
             :filter-node-method="filterOrgeTreeNode"
             ></el-tree>
  </div>
</template>

<script type="text/jsx">
import ajax from '../../api/ajax/ajax'
import api from '../../api/url'
import {transTreeDataToVue} from '../../assets/js'

export default {
  name: 'org-tree',
  props: {
    // 是否默认展开所有的节点
    defaultExpandAll: Boolean,
    // 是否显示结构代码
    showOrgCode: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      menuData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      orgfilterText: ''
    }
  },
  watch: {
    orgfilterText (val) {
      this.$refs.orgTreeX.filter(val)
    }
  },
  methods: {
    ff () {
      let allNodes = this.$refs.orgTreeX.store._getAllNodes()
      for (var i = 0; i < allNodes.length; i++) {
        allNodes[i].expanded = false
      }
    },
    filterOrgeTreeNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1 || data.id.indexOf(value) !== -1
    },
    handleNodeClick () {
      this.$emit('nodeClick', ...arguments)
    },
    renderContentFun (h, { data, node, store }) {
      return (
        <span style="width:100%" class="clear-fix">
          <span class="el-tree-node__label el-tree-node__label_left">{ data.name }</span>
          <span class="el-tree-node__label_right">{ this.showOrgCode ? data.id : '' }</span>
        </span>
      )
    },
    // 获取机构树
    getAllOrgTree () {
      // ajax.post(api.GET_ALL_ORG_TREE).then(res => {
      ajax.post(api.GET_ALL_VALID_ORG_TREE).then(res => {
        this.menuData = transTreeDataToVue(res.data)
        // 默认选中第一项
        if (this.menuData && this.menuData.length >= 1) {
          let checkedNodes = [this.menuData[0]]
          this.$refs.orgTreeX.setCheckedNodes(checkedNodes, true)
          this.$emit('loaded', checkedNodes[0], this.menuData)
        } else {
          this.$emit('loaded', null, this.menuData)
        }
      }).catch(e => {
        console.info('获取机构树发生错误！', e)
      })
    },
    // 获取当前选中的节点
    getCurrentNode () {
      return this.$refs.orgTreeX.getCurrentNode()
    }
  },
  created () {
    this.getAllOrgTree()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.orgTreeComp
  div.orgTreeHeader
    font-size: 15px
    color #606266
    background-color: #fff
    padding 14px 14px 5px 14px
    text-align left
    .orgTreeSearchInput
      margin-bottom 20px
  .el-tree-node__content
    height: 34px
  .expand-btn
    padding 5px 5px
  .el-tree-node__label_left
    float: left
  .el-tree-node__label_right
    position relative
    width 100px
    float right
    text-align center
  .org-name,.org-code
    color #909399
    font-weight bold
  .clear-fix:after
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
</style>
